<template>
        <!-- <template v-for="config in editorStore.componentList" :key="config.id">
            <Wrapper :id="config.id">
                <component :is="config.package" :config="config"/>
            </Wrapper>
        </template> -->
    <Draggable v-model="editorStore.componentList" item-key="id">
        <template #item="{ element }">
            <Wrapper :id="element.id">
                <component :is="element.package" :config="element"/>
            </Wrapper>
        </template>
    </Draggable>
</template>

<script lang="ts" setup>
import Draggable from 'vuedraggable';
import useEditorStore from '@/store/modules/editor';
import Wrapper from "../wrapper/index.vue";

defineOptions({
    name: "Canvas",
});

const editorStore = useEditorStore();

</script>

<style scoped lang="scss">
.center {
    background-color: #fff;
    height:100%;
}
</style>